<template>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <router-link to="/" class="navbar-brand" active-class="active">My Website</router-link>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link to="/" class="nav-link" active-class="active">主页</router-link>
          </li>
          <li class="nav-item dropdown dropdown-hover">
            <router-link
              to="/SeafishList/all"
              class="nav-link"
              id="navbarDropdown"
              role="button"
              aria-expanded="false"
              active-class="active"
            >
              3D模型
            </router-link>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li>
                  <span class="dropdown-item" @click="navigateToSeafishList('freshwater')">淡水鱼类</span>
                </li>
                <li>
                  <span class="dropdown-item" @click="navigateToSeafishList('saltwater')">海水鱼类</span>
                </li>
              </ul>
          </li>
          <li class="nav-item">
            <router-link to="/about" class="nav-link" active-class="active">关于</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/contact" class="nav-link" active-class="active">联系</router-link>
          </li>
        </ul>
        <form @submit.prevent="submitSearch" class="d-flex">
          <input
            type="search"
            class="form-control me-2"
            placeholder="搜索"
            v-model="searchValue"
          />
        </form>
        <ul class="navbar-nav ms-auto">
          <li class="nav-item" v-if="!username">
            <router-link to="/register" class="nav-link">注册</router-link>
          </li>
          <li class="nav-item" v-if="!username">
            <router-link to="/login" class="nav-link">登录</router-link>
          </li>
          <li class="nav-item" v-if="username">
            <div class="dropdown">
              <a
                class="nav-link dropdown-toggle"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                {{ username }}已经登录
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li>
                  <button class="dropdown-item" @click="navigateToUserInfo">个人中心</button>
                </li>
                <li>
                  <button class="dropdown-item" @click="logout">退出登录</button>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()


const username = ref('');
let searchValue = ref('');

const navigateToSeafishList = (type) => {
  router.push({ name: 'SeafishList',params: {type} });
}

const logout = () => {
  localStorage.removeItem('username');
  username.value = '';
  router.go(0);
};

const navigateToUserInfo = () => {
router.push({ name: 'UserInfo' });
}
// 搜搜部分内容
const submitSearch = async () => {
// Implement your search logic here
try {
  router.push({ name: 'Search', query: { q: searchValue.value } });
} catch (error) {
  // Handle the error
}
};


onMounted(() => {
const storedUsername = localStorage.getItem('username')
if (storedUsername) {
  username.value = storedUsername
}
})
</script>

<style scoped>
  .navbar-brand,
  .nav-link {
    color: #fff;
  }

  .nav-link:hover {
    color: #ddd;
  }

  .nav-link {
    color: CornflowerBlue;
  }

  .nav-item .nav-link {
  color: #fff;
  text-decoration: none;
  outline: 0;
  }
  .navbar-nav .nav-item .active {
  color: CornflowerBlue;
  }
  
  .nav-item .nav-link:hover {
  color: #ddd;
  text-decoration: none;
  outline: 0;
  }
  .dropdown:hover>.dropdown-menu {
    display: block;
  }
</style>